<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>emplist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/emplist.css"/>

</head>
<body>
<div id="wrap" class="full">
    <div id="" class="contain">
        <div id="" class="head" style="color: #fff">
            <div id="" class="imgbox">
               员工管理系统
            </div>
            <div id="" class="userbox">
                <span>用户</span>
                <a href="javascript:;" @click="logout">安全退出</a>
            </div>
        </div>
        <div id="" class="context">
            <h1>Welcome {{ user.realname }}!</h1>
            <div id="" class="tablebox">
                <table class="table" width="100">
                    <tr class="table_header">
                        <th>
                            序号
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            照片
                        </th>
                        <th>
                            薪水
                        </th>
                        <th>
                            年龄
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    <tr v-for="(emp,index) in emps" :key="emp.id" :class="index%2==0?'row1':'row2'">
                        <td>
                            {{emp.id}}
                        </td>
                        <td>
                            {{emp.name}}
                        </td>
                        <td>
                            <img :src="'/'+emp.path" style="height: 40px;">
                        </td>
                        <td>
                            {{emp.salary}}
                        </td>
                        <td>
                            {{emp.age}}
                        </td>
                        <td>
                            <a href="javascript:;" @click="delEmp(emp.id)">delete emp</a>&nbsp;
                            <a :href="'/updateEmp.html?id='+emp.id">update
                                emp</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="" class="add">
                <button type="button" onclick="location='addEmp.html'">add</button>
            </div>
        </div>

    </div>
</div>

</body>
</html>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {  //数据
            user: {
                realname: "",
            },//用来存放用户登录信息
            emps: [],
        },
        methods: { //自定义函数
            //处理安全退出
            logout() {
                localStorage.removeItem("user");
                location.reload(true);//刷新页面
            },
            //删除员工信息方法
            delEmp(id) {
                if(window.confirm("确定要删除这条员工信息吗?")){
                    var _this = this;
                    axios.get("/emp/delete?id=" + id).then(res => {
                        if (res.data.state) {
                            alert(res.data.msg + ",点击确定刷新数据!");
                            _this.findAll();//重新加载数据
                        } else {
                            alert(res.data.msg);
                        }
                    });
                }
            },
            //查询员工列表方法
            findAll() {
                var _this = this;
                axios.get("/emp/findAll").then(res => {
                    _this.emps = res.data;
                });
            }
        },
        created() {//生命周期函数
            var userString = localStorage.getItem("user");
            if (userString) {
                this.user = JSON.parse(userString);
            } else {
                alert("您尚未登录,点击确定跳转至登录页面!");
                location.href = "/login.html";
            }
            //查询所有信息
            this.findAll();
        }
    });
</script>